<!DOCTYPE html>
<html>
    <meta charset="UTF-8">
<head>
    <title>个人信息</title>
    <link rel="stylesheet" href="../../element/element.css">
    <script src="../../element/vue.js"></script>
    <script src="../../element/index.js"></script>
    <script src="../../js/axios.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            padding: 0;
            background-color: #f4f4f4;
        }

        h1 {
            text-align: center;
            color: #333;
        }

        img {
            margin-right: 450px;
        }

        label {
            display: block;
            margin-top: 10px;
            margin-bottom: 5px;
            font-weight: bold;
        }

        .button-group {
            text-align: center;
            margin-top: 20px;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>
    <div id="app">
        <h1>个人信息</h1>
        <div id="userInfo" style="display: flex; align-items:center;">
            <div id="userInfo" style="display: flex; align-items:center;">
                <div style="display: flex; flex-direction: column;"> 
                    <img :src="avatarUrl" alt="用户头像" style="width: 150px; height: 150px; border-radius: 50%; margin-left: 150px;margin-top: 150px;">
                    <div style="margin-left: 150px;margin-top: 100px;">
                        <label style="margin-bottom: 50px;">用户ID:&emsp;&emsp;{{ userId }}</label>
                        <label style="margin-bottom: 50px;">用户账号:&emsp;{{account }}</label>
                        <label style="margin-bottom: 50px;">用户名：&emsp;{{ username }}</label>
                        <label style="margin-bottom: 50px;">慈善积分：&emsp;{{ userInfo.charitableScore }}</label>
                    </div>
                </div>
                <div>
                    <label style="margin-bottom: 50px;">性别：&emsp;{{ userInfo.gender }}</label>
                    <label style="margin-bottom: 50px;">年龄：&emsp;{{ userInfo.age }}</label>
                    <label style="margin-bottom: 50px;">用户地址：&emsp;{{ userInfo.address }}</label>
                    <label style="margin-bottom: 50px;">生日：&emsp;{{ userInfo.birthday }}</label>
                    <label style="margin-bottom: 50px;">手机号：&emsp;{{ userInfo.phone }}</label>
                    <label style="margin-bottom: 50px;">邮箱：&emsp;{{ userInfo.email }}</label>
                    <label style="margin-bottom: 50px;">银行：&emsp;{{ userInfo.bank }}</label>
                    <label>银行卡号：{{ userInfo.bankCardNumber }}</label>
                </div>
            </div>
        </div>
        <div class="button-group">
            <el-button type="primary" id="change" @click="handleChange">修改信息</el-button>
            <el-button type="danger" id="cancelAccount" @click="handleCancelAccount">销户</el-button>
            <el-dialog title="销户" :visible.sync="cancelAccountDialog" width="30%">
                <el-input v-model="accountToCancel" placeholder="请输入账号"></el-input>
                <el-input v-model="idCardToCancel" placeholder="请输入身份证号码"></el-input>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="cancelAccountDialog = false">取消</el-button>
                    <el-button type="primary" @click="handleCancel">确定</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: function () {
                return {
                    userInfo: {},
                    userId: localStorage.getItem('userId'),
                    account: localStorage.getItem('account'),
                    username: localStorage.getItem('userName'),
                    avatarUrl: '',
                    cancelAccountDialog: false,
                    accountToCancel: '',
                    idCardToCancel: '',
                };
            },
            mounted: function () {
                this.getUserInfo();
            },
            created() {
                this.getUserAvatar();
            },
            methods: {
                getUserInfo: function () {
                    var self = this;
                    axios.get('http://localhost:8888/api/user/getUserInfo', {
                        params: {
                            userId: self.userId
                        }
                    })
                        .then(function (response) {
                            if (response.data.code === 0) {
                                self.userInfo = response.data.data;
                            } else {
                                console.error(response.data.message);
                                alert('获取用户信息失败，请联系管理员');
                            }
                        })
                        .catch(function (error) {
                            console.error(error);
                            alert('获取用户信息失败，请检查网络连接');
                        });
                },
                handleChange: function () { window.location.href = 'changeUserInfo.html'; },//跳转修改个人信息页面
                handleCancelAccount: function () {
                    this.cancelAccountDialog = true;
                },
                handleCancel: function () {
                    var self = this;

                    axios.post('http://localhost:8888/api/user/cancelAccount', {
                        userId: self.userId,
                        account: self.accountToCancel,
                        idCard: self.idCardToCancel

                    })
                        .then(function (response) {
                            if (response.data.code === 0) {
                                alert('销户成功');

                            } else {
                                alert(response.data.message);
                            }
                        })
                        .catch(function (error) {
                            console.error(error);
                            alert('销户失败，请检查网络连接');
                        });
                },
                //获取头像
                getUserAvatar() {
                    var userId = localStorage.getItem('userId');
                    var randomParam = new Date().getTime(); // 获取当前时间戳作为随机参数
                    axios.get('http://localhost:8888/api/user/showHead', {
                        params: {
                            userId: userId,
                            random: randomParam
                        }
                    })
                        .then(response => {
                            if (response.data.code === 0) {
                                this.avatarUrl = response.data.data;
                            } else {
                                this.$message.error(response.data.message);
                            }
                        })
                        .catch(error => {
                            this.$message.error('获取用户头像失败：' + error);
                        });
                },

            },

            watch: {
                accountToCancel: function (newVal, oldVal) {
                    console.log('accountToCancel changed from ' + oldVal + ' to ' + newVal);
                },
                idCardToCancel: function (newVal, oldVal) {
                    console.log('idCardToCancel changed from ' + oldVal + ' to ' + newVal);
                }
            }
        });
    </script>
</body>

</html>